<template>
    <el-row class="myCreateOrderrow5" type="flex" justify="center">
        <el-col :span="1" class="myCreateOrdercol5leftsolid"></el-col>
        <el-col :span="4" class="myCreateOrdercol5left">
            <div class="myCreateOrdercol5leftdiv">商品清单</div>
        </el-col>
        <el-col :span="14"></el-col>
        <el-col :span="5" class="myCreateOrdercol5right" :style="changeText">
            <span class="myCreateOrdercol5rightText"
            @mouseover="mouseoverCOSCTitle" @mouseleave="mouseleaveCOSCTitle"
            @click="GotoCartBtn">
            返回购物车修改商品
            </span></el-col>
    </el-row>
</template>

<script>
    export default {
        name:'XiaoCOShowCartTitle',
        data(){
            return{
                changeText:'',
            }
        },
        methods:{
            mouseoverCOSCTitle(){
                this.changeText={color: "rgb(138, 179, 255)"}
            },
            mouseleaveCOSCTitle(){
                this.changeText=''
            },
            GotoCartBtn(){
                this.$confirm('您要返回购物车页面重新选购吗？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
                })
                .then(() => {
                    this.$router.push({name:'xCart'})
                })
                .catch(() => {});
            }
        },
    }
</script>

<style scoped>
.myCreateOrderrow5{
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 60px;
    height: 100%;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(212, 212, 212);
}
.myCreateOrdercol5leftsolid{
    background-color: rgb(228, 67, 102);
    width: 5px;
}
.myCreateOrdercol5left{
    height: 40px;
    text-align: center;
}
.myCreateOrdercol5leftdiv{
    opacity: 0.7;
    font-size: 16px;
    margin-top: 11px;
}
.myCreateOrdercol5right{
    font-size: 12px;
    color: rgb(63, 119, 241);
}
.myCreateOrdercol5rightText{
    margin-top: 13px;
    float: right;
    cursor: pointer;
}
</style>